<script lang="ts" setup >
import { useRouter } from 'vue-router';
import type { Ref } from 'vue';
import { ref } from 'vue'
import { ElMessage } from 'element-plus';
import { getlogin } from '@/api/user'
let router = useRouter()
let usertel: Ref<string> = ref('')
let f2: Ref<boolean> = ref(false)
let f6: Ref<boolean> = ref(false)
let f7: Ref<boolean> = ref(false)
let userpsw: Ref<string> = ref('')
let userarr: Ref<string> = ref(JSON.parse(String(localStorage.getItem("userarr"))))
// console.log(JSON.parse(JSON.stringify(userarr.value)));
// let psw: Ref<string> = ref(JSON.parse(JSON.stringify(JSON.parse(String(localStorage.getItem("userarr"))).value[0])).psw)
function login() {
    for (let i = 0; i < JSON.parse(JSON.stringify(userarr.value)).length; i++) {
        if (usertel.value == JSON.parse(JSON.stringify(userarr.value))[i].tel && userpsw.value == JSON.parse(JSON.stringify(userarr.value))[i].psw) {
            getlogin(i).then(res => {
                ElMessage.success(res.data.message)
            })
            return setTimeout(() => {
                router.push('/home')
            }, 1000);
        }
    }
    return ElMessage.error('账号或密码错误')
}
function setpsw() {
    router.push('/setpsw')
}
function enroll() {
    router.push('/enroll')
}
function changeacc() {
    if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(usertel.value)) {
        f2.value = true
    }
    if (usertel.value.length >= 12) {
        f7.value = true
        if (f7.value) {
            if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(usertel.value)) {
                f6.value = false
            }
            else {
                f6.value = true
            }
        }
    }
    else {
        if (f7.value) {
            if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(usertel.value)) {
                f6.value = false
            }
            else {
                f6.value = true
            }
        }
    }
}
</script>
<template>
    <img src="../../assets/img/sp.jpg" alt="">
    <div style="position: fixed; margin: 50px 40px;width: calc(100% - 80px);">
        <h1 style="color: white;">进入你的游戏世界</h1>
        <div style="font-size: 20px;margin-bottom: 60px;color: white;">手机号登录</div>
        <div>
            <el-tooltip class="box-item" :disabled="f2" effect="dark" content="请输入11位以13-19开头的电话号码" placement="top-start">
                <el-input @input="changeacc" v-model="usertel" style="height: 50px; width: 100%;"
                    placeholder="请输入账号"></el-input>
            </el-tooltip>
            <div style="color: rgb(255, 204, 0);font-size: 14px;margin-bottom: 20px;"><b v-show="f6">请输入11位以13-19开头的电话号码</b>
            </div>
            <el-input v-model="userpsw" show-password placeholder="请输入密码" style="height: 50px; width: 100%;"></el-input>
        </div>
        <el-button color="#000" style="margin-top: 40px;font-size: 17px;width: 100%;height: 50px;"
            @click="login">登录</el-button>
        <div style="color: white;display: flex;justify-content: space-between;margin-top: 20px;"><span
                @click="setpsw"><b>忘记密码</b></span><span>没有账户，我要<b style="color: red;" @click="enroll">注册</b></span></div>
    </div>
</template>
<style lang="scss" scoped>
img {
    position: fixed;
    height: 100%;
    width: 100%;
    // background-color:rgba(0,0,0,1)
    // opacity: 0.9;
    filter: brightness(0.7);
}
</style>